<template>
  <chart-card
    :updateTime="updateTime"
    @handleRefresh="getChargeMonitor"
    :title="'低电量监控'"
  >
    <span slot="titleContent">
      <span class="stastic-num" v-if="statsticNum">{{
        statsticNum > 99 ? "99+" : statsticNum
      }}</span>
    </span>
    <div class="energy-monitor-contain common-scroll">
      <template v-for="(item, idx) in monitorCards">
        <car-monitor-info :key="idx" :monitorInfo="item"> </car-monitor-info>
      </template>
    </div>
  </chart-card>
</template>

<script>
import { CarMonitorInfo, ChartCard } from "./components";
import { getChargeMonitor } from "@/services/home";
export default {
  name: "ChargeMonitor",
  data() {
    return {
      statsticNum: 0,
      monitorCards: [
        {
          no: "京A37782",
          battery: 15,
          mile: 23.8,
          speed: 55.3,
          temp: 32,
          isCold: true,
          addr: "河北省秦皇岛市卢龙县双望镇G1京哈高速",
          name: "dawen",
          tel: 15133023765,
          status: 1,
          coldStatus: 1,
          egineStatus: 1
        },
        {
          no: "京A37782",
          battery: 15,
          mile: 23.8,
          speed: 55.3,
          temp: 32,
          isCold: true,
          addr: "河北省秦皇岛市卢龙县双望镇G1京哈高速",
          name: "dawen",
          tel: 15133023765,
          status: 2,
          coldStatus: 1,
          egineStatus: 1
        },
        {
          no: "京A37782",
          battery: 15,
          mile: 23.8,
          speed: 55.3,
          temp: 32,
          isCold: false,
          addr: "河北省秦皇岛市卢龙县双望镇G1京哈高速",
          name: "dawen",
          tel: 15133023765,
          status: 3,
          egineStatus: 0
        },
        {
          no: "京A37782",
          battery: 15,
          mile: 23.8,
          speed: 55.3,
          temp: 32,
          isCold: true,
          addr: "河北省秦皇岛市卢龙县双望镇G1京哈高速",
          name: "dawen",
          tel: 15133023765,
          status: 1,
          coldStatus: 0,
          egineStatus: 1
        },
        {
          no: "京A37782",
          battery: 15,
          mile: 23.8,
          speed: 55.3,
          temp: 32,
          isCold: true,
          addr: "河北省秦皇岛市卢龙县双望镇G1京哈高速",
          name: "dawen",
          tel: 15133023765,
          status: 1,
          coldStatus: 0,
          egineStatus: 1
        },
        {
          no: "京A37782",
          battery: 15,
          mile: 23.8,
          speed: 55.3,
          temp: 32,
          isCold: true,
          addr: "河北省秦皇岛市卢龙县双望镇G1京哈高速",
          name: "dawen",
          tel: 15133023765,
          status: 1,
          coldStatus: 0,
          egineStatus: 1
        }
      ],
      updateTime: "2022-05-06 17:09:02"
    };
  },
  mounted() {
    // this.getChargeMonitor();
  },
  components: {
    CarMonitorInfo,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    async getChargeMonitor() {
      const {
        data: {
          data: { list, total, updateTime },
          code
        }
      } = await getChargeMonitor();
      if (code === 200) {
        this.monitorCards = list;
        this.statsticNum = total;
        this.updateTime = updateTime;
      }
    }
  }
};
</script>

<style scoped lang="less">
.stastic-num {
  color: #fff;
  background: rgba(217, 0, 27, 1);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.energy-monitor-contain {
  padding-right: 10px;
  max-height: 320px;
  overflow-y: auto;
}
</style>
